<template>
	<div :class="['custom-nav']" :style="{paddingTop: statusBarHeight + 8 + 'px', height: menuButtonInfo.height + 'px'}">{{title || $t('hyzf')}}
		<text style="margin-left:20rpx" @click="changeLanguage">{{langText}}</text>
	</div>
</template>

<script setup>
	import { computed } from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	const statusBarHeight = computed(() => uni.getWindowInfo().statusBarHeight)
	console.log(uni.getMenuButtonBoundingClientRect())
	const menuButtonInfo = computed(() => uni.getMenuButtonBoundingClientRect())
	const {title} = defineProps(['title'])
	const {
		t,
		locale
	} = useI18n() //其实就是i18n的实例
	const langText = computed(() => {
		return locale.value === 'en' ? 'Chinese' : '英文'
	})
	const changeLanguage = () => {
		const curLang = uni.getStorageSync('lan') === 'en' ? 'zh' : 'en'
		uni.setStorageSync('lan', curLang)
		locale.value = curLang
	}
	
</script>

<style lang="scss" scoped>
	.custom-nav{
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		width: 100%;
		color: #fff;
		font-weight: bold;
		// background: linear-gradient(135deg, rgba(2, 114, 240, 1) 0%, rgba(2, 114, 240, 1) 0%, rgba(57, 165, 255, 1) 100%, rgba(57, 165, 255, 1) 100%);
	}
</style>